<template>
    <div class="circle-bar-box">
        <div class="circle-bar" :style="{'width':circleBarWidth,'height':circleBarHeight,'backgroundColor':circleBarBC}">
            <div class="circle-bar-left" :style="{'width':circleBarWidth,'height':circleBarHeight,'clip':circleBarLClip,'backgroundColor':circleBarLRBC,'transform':circleBarLeftRotate}"></div>
            <div class="circle-bar-right" :style="{'width':circleBarWidth,'height':circleBarHeight,'clip':circleBarRClip,'backgroundColor':circleBarRightRotate.backgroundColor,'transform':circleBarRightRotate.rotate}"></div>
            <div class="mask" :style="{'width':maskWidth,'height':maskHeight,'line-height':maskLineHeight}">
                <span class="percent" :style="{'color':progressColor}">{{progress}}%</span>
            </div>
        </div>
    </div>

</template>

<script lang="ts">
    import {Component, Prop, Vue } from "vue-property-decorator";

    @Component({components: {}})
    export default class RoundProgressBar extends Vue {
        private publicPath = process.env.BASE_URL;
        //circleBar的宽度
        @Prop({default:'',type:String})
        public circleBarWidth!:String;
        //circleBar的高度
        @Prop({default:'',type:String})
        public circleBarHeight!:String;
        //circleBar的背景颜色
        @Prop({default:'',type:String})
        public circleBarBC!:String;
        //circleBarLeft/Right的背景颜色
        @Prop({default:'',type:String})
        public circleBarLRBC!:String;
        //circleBarLeft剪切
        @Prop({default:'',type:String})
        public circleBarLClip!:String;
        //circleBarRight剪切
        @Prop({default:'',type:String})
        public circleBarRClip!:String;
        //进度
        @Prop({default:'',type:Number})
        public progress!:number;
        //mask的宽度
        @Prop({default:'',type:String})
        public maskWidth!:String;
        //mask的高度
        @Prop({default:'',type:String})
        public maskHeight!:String;
        //mask的行高
        @Prop({default:'',type:String})
        public maskLineHeight!:String;
        //进度字体颜色
        @Prop({default:'',type:String})
        public progressColor!:String;

        //circleBarRight的旋转角度
        private get circleBarRightRotate():any{
            if(this.progress<=50){
                let backgroundColor=this.circleBarLRBC;
                let rotate=`rotate(${this.progress*3.6}deg)`;
                return {rotate:rotate,backgroundColor:backgroundColor};
            }else{
                let backgroundColor=this.circleBarBC;
                let rotate=`rotate(0deg)`;
                return {rotate:rotate,backgroundColor:backgroundColor};
            }

        }
        //circleBarLeft的旋转角度
        private get circleBarLeftRotate():string{
            if(this.progress>50){
                let rotate=`rotate(${(this.progress-50)*3.6}deg)`;
                return rotate;
            }else{
                let rotate=`rotate(0deg)`;
                return rotate;
            }
        }

        private mounted(): void {

        }


    }
</script>

<style scoped lang="stylus">
    .circle-bar
        position relative;
        font-size 14px;
        //width 40px;
        //height 40px;
        //background-color #333;
        border-radius 50%;

        */*所有的后代都水平垂直居中，这样就是同心圆了*/
            position absolute;
            top 0;
            right 0;
            bottom 0;
            left 0;
            margin auto;
            border-radius 50%;
            font-size 13px;

    //.circle-bar-left,.circle-bar-right
        //width 40px;
        //height 40px;
       // background-color #eee;

   .circle-bar-left
        clip rect(0,5vw,auto,0);
   .circle-bar-right
        clip rect(0,auto,auto,5vw);

    .mask
        //width 30px;
        //height 30px;
        //line-height 30px;
        background-color #fff;
        text-align center;
        color rgba(0,0,0,0.5);

    .mask
        &:first-child
            font-size 12px;
            display block;



</style>
